<template>
    <a-drawer v-model:visible="visible" width="70%" :footer="footers.length > 0">
      <template #title>添加流水</template>
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #tableButtons>

            <slot name="tableButtons" >
              <a-button
              @click="add()" type="primary" status="success"
              class="w-full lg:w-auto mt-2 lg:mt-0"
                >
                <template #icon>
                  <icon-plus />
                </template>
                添加
                </a-button>
            </slot>

          </template>
      </ma-crud>
      <template #footer>
        <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
          <div v-for="footer in footers" class="footer-item">{{footer.label}} : {{ footer.value }}</div>
        </div>
      </template>
      <batch-action-modal v-model="batch.visible"
      :crud-ref="crudRef"
      :selected="selected"
      ref="batchActionRef"
      ></batch-action-modal>
    </a-drawer>

  </template>
<script setup>
   import { ref, reactive ,computed ,inject,watch} from 'vue'
   import bonus from '@/api/finance/bonus'
   import BatchActionModal from "@cps/actions/batchActionModal.vue"
   
  const batchActionRef = ref()
  const batch = ref({visible:false,})
  const selected = computed(()=>crudRef.value?.selecteds)
  const crudRef = ref()
  const visible = ref(false)
  const record = inject('record')
  const refreshRecode = inject('refreshRecode')
  const totalMoney = ref(0)
  let footers = ref([])
  const open = () => {
    visible.value = true
  }

watch(()=>visible,async () => {
  if (visible.value) {
    crudRef.value.requestData()
    return
  }
},{
  deep:true,
  immediate:true,
})

const setFoot = (list) => {
  footers.value = list
}
const add = () => {
  batchActionRef.value.open({
    title:'删除',displayDataIndex:"id",api:bonus.billIn,
    form:{
        submited:function(data){
            console.log('列表核销回调')
            refreshRecode()
          },
          form:{
            bill_id:record.value.id,
          },
      }
  })
}

watch(selected,(value)=>{
    if(value.length>0 && selected.value.length > 0){
        let total = 0
        let data = crudRef.value.getTableData()
        for(let i=0;i<data.length;i++){
          if(selected.value.includes(data[i].id)){
            total +=  data[i].amount - 0
          }
        }
        footers.value = [{label:'费用金额',value:total}]
        totalMoney.value = total
      }else{
        footers.value = []
      }
    })
  const crud = reactive({
    autoRequest: false,
    api: bonus.getList,
    showIndex: false,
    rowSelection: {
      showCheckedAll: true
    },
    beforeRequest: (params) => {
        params.user_id = record.value.user_id
        params.bill_id = 0
        params.status = 1
        return params
    },
})
const columns = reactive([
    {
        title: "ID",
        hide:true,
        dataIndex: "id",
    },
    {
        title: "业务时间",
        dataIndex: "business_at",
    },
    {
        title: "运单号",
        dataIndex: "invoices_id",
        search:true
    },
    {
        title: "重量",
        dataIndex: "fee_num",
    },
    {
        title: "费用类型",
        dataIndex: "fee_type.fee_name", 
    },
    {
        title: "单位",
        dataIndex: "unit",
        formType: "select",
        dict: {
            data: [
                { label: "KG", value: 1 },
                { label: "立方", value: 2 },
                { label: "票", value: 3},
            ],
        translation: true,
    },
  }, 
  {
        title: "费用",
        dataIndex: "amount",
    },

])

defineExpose({ open})
</script>
 
  

